<template>
    <!-- 搜索相关的弹窗 -->
    <div >
      <input
        type="text"
        v-model="searchKeyword"
        :placeholder="placeHolder"
        class="bg-gray-100 rounded h-full p-5 w-full"
        @input="handleInput"
      />
    </div>
</template>

<script>
import bus from '@/utils/bus.js'
export default {
  name: 'SearchComponent',
  props:{
    placeHolder:{
      type: String,
      required : true,
    }
  },
  data() {
    return {
      searchKeyword: '', // 搜索关键词
      matchPositions: [], // 存储匹配到的文本位置信息
      currentMatchIndex: -1, // 当前高亮的匹配项索引
      matchCount: 0, // 匹配到的总数量
    };
  },
  watch: {
    searchKeyword (newValue) {
      this.searchKeyword = newValue
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleInput() {
      bus.$emit('filterKeyword', this.searchKeyword)
      this.$emit('filterKeyword', this.searchKeyword)
    },
  },
};
</script>

<style scoped>
.search-popup {

}
</style>